<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas id="physicsCanvas" width="450" height="300"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Helper function to draw an arrow
    function drawArrow(context, fromX, fromY, toX, toY, headLength = 10) {
        const dx = toX - fromX;
        const dy = toY - fromY;
        const angle = Math.atan2(dy, dx);

        context.beginPath();
        context.moveTo(fromX, fromY);
        context.lineTo(toX, toY);
        context.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
        context.moveTo(toX, toY);
        context.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
        context.stroke();
    }
    
    // Helper function to draw a hatched wall
    function drawWall(context, x, y, width, height) {
        // Draw the rectangle outline
        context.beginPath();
        context.rect(x, y, width, height);
        context.stroke();

        // Draw hatching lines
        context.save();
        context.beginPath();
        context.rect(x, y, width, height);
        context.clip(); // Restrict drawing to the rectangle area
        
        const oldLineWidth = context.lineWidth;
        context.lineWidth = 1;
        const spacing = 5;
        
        // The hatching lines have a slope of -1
        for (let i = -height; i < width + height; i += spacing) {
            context.beginPath();
            context.moveTo(x + i, y);
            context.lineTo(x + i - height, y + height);
            context.stroke();
        }
        
        context.restore(); // Restore the clipping region and line width
    }


    // --- Main Drawing ---

    // Define coordinates and dimensions
    const yBase = 220;
    const wallHeight = 100;
    const wallWidth = 12;
    const xLeftWall = 80;
    const xRightWall = 360;
    const yTop = yBase - wallHeight;

    // Set drawing styles
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';

    // 1. Draw the base line
    ctx.beginPath();
    ctx.moveTo(30, yBase);
    ctx.lineTo(420, yBase);
    ctx.stroke();
    
    // 2. Draw the two walls
    drawWall(ctx, xLeftWall, yTop, wallWidth, yBase - yTop);
    drawWall(ctx, xRightWall, yTop, wallWidth, yBase - yTop);

    // 3. Draw the distance dimension 'x'
    const yDimLine = yTop - 20;
    ctx.beginPath();
    ctx.moveTo(xLeftWall + wallWidth, yDimLine);
    ctx.lineTo(xRightWall, yDimLine);
    ctx.stroke();
    // Ticks at the end of the dimension line
    ctx.beginPath();
    ctx.moveTo(xLeftWall + wallWidth, yDimLine - 5);
    ctx.lineTo(xLeftWall + wallWidth, yDimLine + 5);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(xRightWall, yDimLine - 5);
    ctx.lineTo(xRightWall, yDimLine + 5);
    ctx.stroke();
    // Text label 'x'
    ctx.font = 'italic 20px Times New Roman';
    ctx.fillText('x', (xLeftWall + wallWidth + xRightWall) / 2, yDimLine - 5);

    // 4. Draw the velocity vectors 'V'
    const yVelocity = yTop + wallHeight / 2;
    const arrowLength = 50;
    // Left wall velocity
    drawArrow(ctx, xLeftWall + wallWidth + 10, yVelocity, xLeftWall + wallWidth + 10 + arrowLength, yVelocity);
    ctx.fillText('V', xLeftWall + wallWidth + 10 + arrowLength / 2, yVelocity - 8);
    // Right wall velocity
    drawArrow(ctx, xRightWall - 10, yVelocity, xRightWall - 10 - arrowLength, yVelocity);
    ctx.fillText('V', xRightWall - 10 - arrowLength / 2, yVelocity - 8);

    // 5. Draw the momentum vector 'p'
    const yMomentum = yVelocity + 40;
    const xCenter = (xLeftWall + wallWidth + xRightWall) / 2;
    const pArrowLength = 80;
    drawArrow(ctx, xCenter + pArrowLength / 2, yMomentum, xCenter - pArrowLength / 2, yMomentum);
    ctx.fillText('p', xCenter, yMomentum - 8);

    // 6. Draw the figure caption
    ctx.font = '16px Times New Roman';
    ctx.textBaseline = 'top';
    ctx.fillText('Fig. 2.75.', canvas.width / 2, yBase + 20);

</script>
</body>
</html>